<template>
  <div v-loading ="loading">
    <div class="order-wrap-detail">
      <div class="order-status-wrap">
        <div class="select-detail">
        <div class="select-time">
          <div class="time-left">
            <p class="time-left-txt">下单时间: </p>
            <div class="time-box">
              <div class="time-select">
                <el-date-picker
                  v-model="startTime"
                  :picker-options="startTimeLimit"
                  class="time-style"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  >
                </el-date-picker>
              </div>
              <p>-</p>
              <div class="time-select">
                <el-date-picker
                  v-model="endTime"
                  :picker-options="endTimeLimit"
                  type="date"
                  class="time-style"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  >
                </el-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="order-right">
          <div class="order-status">订单状态:</div>
          <div class="order-all">
            <el-select 
              v-model="value" 
              placeholder="全部"  
              popper-class="select-popper"
              @change="statusHandler($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      </div>
      <div class="order-wrap-code">
        <div class="order-brief">
          <div class="order-text-r">
            <div>订&nbsp单&nbsp号:</div>
          </div>   
          <input type="text" placeholder="请输入订单明细" v-model="orderId" @keyup.enter="queryOrder">
        </div>
        <el-button 
          class="order-wrap-query" 
          type="primary" 
          plain
          @click="queryOrder"
          >查找订单
        </el-button>
      </div>
    </div>
    <div class="or-list-container">
      <div class="or-export-data">
        <div class="or-export-left">
          <div class="or-export-text">数据明细</div>
        </div>
      </div>
      <div class="or-shop-list shop-list-height-one">
        <div class="or-shop-item shop-order-info">
          <p>商品信息</p>
        </div>
        <div class="or-shop-item shop-order-number">
          <p>订单号</p>
        </div>
        <div class="or-shop-item shop-order-status">
          <p>下单状态</p>
        </div>
        <div class="or-shop-item shop-order-time">
          <p>下单时间</p>
        </div>
        <div class="or-shop-item shop-order-rate">
          <p>佣金比例</p>
        </div>
        <div class="or-shop-item shop-order-commission">
          <p>预估佣金 (元)</p>
        </div>
      </div>
      <div class="or-shop-conrainer">
        <template v-if="list.length">
          <div class="or-shop-list shop-list-height-two" v-for="(item,index) in list" :key="index">
            <div class="or-shop-item shop-order-info">
              <div class="or-shop-img"><img v-lazy="item.itemPicUrl" :key="item.itemPicUrl"></div>
              <div class="or-shop-text"><p :title="item.itemName">{{item.itemName}}</p></div>
            </div>
            <div class="or-shop-item shop-order-number">
              <p>{{item.orderId}}</p>
            </div>
            <div class="or-shop-item shop-order-status">
              <p :class="orderStatus(item.status)">{{item.status}}</p>
            </div>
            <div class="or-shop-item shop-order-time">
              <p>{{item.orderTime}}</p>
            </div>
            <div class="or-shop-item shop-order-rate">
              <p>{{item.commissionRate}}%</p>
            </div>
            <div class="or-shop-item shop-order-commission">
              <p>￥{{item.commission}}</p>
            </div>
          </div>
        </template>
        <div class="no-wrap" v-else>暂无数据</div>
        <div class="pagination"  v-show = "total > 0">
          <el-pagination
            background
            :current-page = "pageNum"
            @current-change="changeCurrentPage"
            :page-sizes="[8,16,24]"
            @size-change="changeCurrentPageSize"
            :total = "total"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
          <div class="pageSearch" @click="pageSearch">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setKuaiShou', 2)
  },
  layout: 'internalouts',
  data(){
    return{
      startTime:'', //开始时间
      endTime:'' ,  //结束时间
      startTimeLimit:{
        disabledDate:(time) =>{
          if(this.endTime){
            return time.getTime() > new Date(this.endTime).getTime();
          }
        }
      },
      endTimeLimit:{
        disabledDate:(time) =>{
          if (this.startTime) {
            return time.getTime() < new Date(this.startTime).getTime() - 1 * 24 * 60 * 60 * 1000;
          }
        }
      },
      list:[],//商品列表
      orderId:'',//查询订单号
      options: [{//下拉菜单选项
          value: '',
          label: '全部'
        }, {
          value: '10',
          label: '待付款'
        }, {
          value: '30',
          label: '已付款'
        }, {
          value: '40',
          label: '已发货'
        }, {
          value: '50',
          label: '已签收'
        }, {
          value: '70',
          label: '订单成功'
        }, {
          value: '0',
          label: '未知状态'
      }],
      value: '',
      pageNum:1, //第一页
			pageSize:8, //每页的条数
      total:0, //总条数
      loading:true, //页面加载效果
    }
  },
  mounted() {
    this.getData();
  },
  created(){
  },
  computed:{
    orderStatus(){
      return function(status){
        return {
          'order-success-active':status === '订单成功',
          'order-success-active1':status === '已签收',
          'order-success-active2':status === '已发货',
          'order-success-active3':status === '已付款',
          'order-fail-active':status === '订单失败',
          'order-fail-active1':status === '待付款',
        }
      }
    },
    shopId(){
      return this.$store.state.ksAccount1.shopId
    }
  },
  methods:{
    statusHandler(value) {
      this.getData();
    },
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.getData(); //调用商品列表接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.getData();//调用商品列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.getData();//调用商品列表接口
      this.$scrollTo();
		},
    queryOrder(){
      this.pageNum = 1;
      this.getData();      
    },
    getData(){
      this.loading = true;
      let params ={
        shopId: this.shopId,
        orderStatus:this.value,//订单状态
        orderId:this.orderId,//订单号
        startTime: this.startTime,//下单开始时间
        endTime: this.endTime,//单结束时间
        pageNum:this.pageNum, //页数
        pageSize:this.pageSize, //每页的条数
      }
      this.$axios.$post('ksOrderList',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.list = res.obj.list;
          this.total = res.obj.total; //未来拿到总数
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
  },
}
</script>

<style scoped>
  .order-wrap-detail{
    padding:22px;
    background: #fff;
    height: 120px;
    box-sizing: border-box;
  }
  .order-wrap-effect{
    height:50px;
    line-height: 50px;
    color:#999999;
    font-size: 14px;
  }
  .order-wrap-code{
    display:flex;
    width:530px;
    justify-content: space-between;
    align-items: center;
    color:#d0c1c1;
  }
  .select-detail{
    width: 600px;
    height:50px;
    display:flex;
    justify-content: space-between;
    color:#666666;
  }
  .order-right{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:220px;
    color:#666666;
    font-size: 14px;
    padding-bottom:20px;
    box-sizing: border-box;
  }
  .el-select{
    width:120px;
  }
  .el-button{
    padding:8px 14px 8px 24px;
  }
  .select-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding:0;
  }
  .select-time .time-right {
    width: 100px;
    height: 30px;
    background: #0096e6;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
  }
  .time-box {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .time-box p {
    width: 30px;
  }
  .time-box {
    display: flex;
    align-items: center;
  }
  .time-style {
    width: 140px;
  }
  .time-left {
    display: flex;
    align-items: center;
  }
  .time-left-txt {
    font-size: 14px;
    color: #666;
    margin-right: 14px;
  }
  .order-brief{
    display:flex;
    width:379px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .order-text-r{
    width:60px;
    text-align:right;
    color:#666666;
  }
  .order-brief>input{
    display:inline-block;
    width: 306px;
    height: 34px;
    border:1px solid #ebebeb;
    border-radius: 4px;
    text-indent: 22px;
    box-sizing: border-box;
  }
  .order-wrap-query,.data-wrap-export{
    font-size: 14px;
    background-color: #0096e6;
    color:#fff;
    border-radius:15px;
    padding:8px 22px;
    box-sizing: border-box;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .or-list-container{
    background:#ffffff;
    padding-bottom:40px;
  }
  .or-shop-list:nth-child(even){
    background:#f8f9fb !important;
  }
  .li-wrap-right {
    flex:1;
    margin:20px;
    min-width: 940px;
    background:#ffffff;
  }
  .li-wrap-shop{
    padding:20px;
    font-size:14px;
  }
  .li-wrap-shop-query{
    width:830px;
    height:30px;
    display:flex;
    align-items:center;
    user-select:none;
    color:#333333;
  }
  .shop-search{
    width:331px;
    display:flex;
  }
  .shop-name{
    width:60px;
    height:30px;
    line-height:30px;
  }
  .shop-search input{
    width:255px;
    height:30px;
    text-indent:10px;
    margin-left:12px;
    border:1px solid #e1e1e1;
    box-sizing:border-box;
    border-radius:4px;
  }
  /* 状态 */
  .shop-status{
    width:160px;
    height:30px;
    display:flex;
    margin-left:40px;
  }
  .select-status{
    width: 113px;
    height: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    text-indent:12px;
  }
  .status{
    margin-right:12px;
    height:30px;
    line-height:30px;
  }
  .select-status img{
    width: 11px;
    height: 6px;
    margin-right: 8px;
    transition: all .2s;
    user-select: none;
  }
  .select-status-list{
    font-size: 14px;
    color: #333;
    width: 113px;
    height: 90px;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 34px;
    left: 0;
    box-shadow: 0px 1px 5px #888888;
    user-select: none;
  }
  .select-status-item{
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    background: #fff;
  }
  .select-status-item:hover{
    background: #ebf7fd
  }
  .gs-xlimg {
    transform: rotate(-180deg)
  }
  /* 按钮查找 */
  .btn-search{
    width:225px;
    height:30px;
    margin-left:80px;
    display:flex;
  }
  .btn-shop{
    width: 100px;
    height: 30px;
    background:#0096e6;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
  }
  .btn-m{
    margin-right:25px;
  }
  .active{
    background: #0096e6;
    color:#fff;
  }
/* 商品列表 */
  .or-status-continer{
    display:flex;
    align-items:center;
    height:30px;
  }
  .or-export-data{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#ffffff;
    margin-top:20px;
    height:64px;
  }
  .or-export-text{
    width:80px;
    height:16px;
    border-left:3px solid #0096E6;
    box-sizing:border-box;
    text-align:right;
    font-size:14px;
    color:#333333;
    font-weight:bold;
    margin-left:20px;
  }
  .or-export-btn{
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    color:#ffffff;
    background:#0096E6;
    border-radius:15px;
    cursor:pointer;
    user-select:none;
    margin-right:40px;
  }
  .or-export-btn:hover{
    background:#66B1FF; 
  }
  .or-shop-list{
    color:#666666;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#666666;
    font-weight:400;
  }
  .shop-list-height-one{
    height:40px;
    color:#333333;
  }
  .shop-list-height-two{
    height:80px;
    font-weight: 400;
  }
  .or-shop-list:nth-child(odd){
    background:#fff;
  }
  .or-shop-list .shop-order-info{
    width:23.09%;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .or-shop-list .shop-order-number{
    width:18.09%;
    text-align:center;
  }
  .or-shop-list .shop-order-number p{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .or-shop-list .shop-order-status{
    width:11.17%;
    text-align:center;
  }
  .or-shop-list .shop-order-time{
    width:19.15%;
    text-align:center;
  }
  .or-shop-list .shop-order-rate{
    width:10.64%;
    text-align:center
  }
  .or-shop-list .shop-order-commission{
    width:14.89%;
    text-align:center
  }
  .or-shop-img{
    width:57px;
    height:57px;
  }
  @media screen and (min-width:1200px){
    .or-shop-img{
      width:70px;
      height:70px;
    }
  }
  .or-shop-img img{
    width:100%;
    height:100%;
  }
  .or-shop-text{
    margin-left:10px;
    width: 150px;
  }
  .or-shop-text p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    height: 16.8px;
    word-break: break-all;
    line-height: 1.2;
    margin-top: 2px;
  }
  .pagination .pageSearch:hover{
    background:#66B1FF;
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:20px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin:0 10px;
    user-select:none;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
  /* 订单成功 已签收  已发货 已付款字体颜色 */
  .order-success-active{
    color:#20ba39 !important;
  }
  .order-success-active1{
    color:#20ba39 !important;
  }
  .order-success-active2{
    color:#20ba39 !important;
  }
  .order-success-active3{
    color:#20ba39 !important;
  }
  /* 订单失败 待付款 的字体颜色 */
  .order-fail-active{
    color:#e73547 !important;
  }
  .order-fail-active1{
    color:#e73547 !important;
  }
/* table表格的暂无数据 */
  .no-wrap{
    height:60px;
    line-height: 60px;
    text-align:center;
    font-size: 14px;
    color: #909399;
    border:1px solid #EBEEF5 ;
    margin-bottom:20px;
  }
  input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
   /*修改的elementUI样式  */
  /deep/ .el-input__inner{
    height:30px;
  }
  /deep/ .el-input__suffix{
    right:10px;
  }
  /deep/ .el-icon-date::before{
    content:''
  }
  /deep/ .el-select .el-input .el-input__inner{
    height:30px;
    line-height:30px
  }
  /deep/ .el-select .el-input .el-input__icon{
    line-height:30px;
  }
  .el-input__inner {
    width: 120px
  }
  .el-date-editor.el-input {
    width: 120px;
  }
  .el-input--small .el-input__inner{
    height:34px !important;
  }
</style>
